<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootdo - 文件管理器</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
    <link href="/css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
    <link href="/css/layui.css" th:href="@{/css/layui.css}" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
    <style>
        .aactive {
            color: #13b5b7 !important;
        }
        .hactive:hover{
            color: #13b5b7 !important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" id="app">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="file-manager">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="fa fa-cloud"></i>单文件
                        </button>
                        &nbsp;&nbsp;
                        <button type="button" class="layui-btn" id="test2">
                            <i class="fa fa-cloud"></i>多文件
                        </button>
                        <div class="hr-line-dashed"></div>
                        <ul class="folder-list" style="padding: 0" >
                            <li>
                                <a href="javascript:void(0)" class="file-control hactive" :class="{'aactive': type == ''}" v-on:click="changeType('')">
                                    <i class="fa fa-folder"></i>所有文件
                                </a>
                            </li>

                            <li v-for="(item,i) in classList">
                                <a href="javascript:void(0)" class="file-control hactive" data-id="{{item.id}}"  v-on:click="changeType(item)"
                                   :class="{'aactive': type == item.id}">
                                    <i class="fa fa-folder" ></i>{{ item.name }}
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="ibox-content">
                    <select class="form-control" id="ossId" name="ossName">
                        <option value="">请选择存储方式</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-sm-9 animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="file-box" v-for="row in rows">
                        <div class="file">
                            <a href="#">
                                <span class="corner"></span>
                                <div class="image">
                                    <img alt="image" class="img-responsive" :src="row.image">
                                </div>
                                <div class="file-name">
                                    <br/>
                                    <small>{{row.createTime}}</small>
                                </div>
                                &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<button
                                    class="btn btn-warning btn-xs copy" :url="row.image">复制
                            </button>&nbsp; &nbsp; &nbsp; &nbsp;<button class="btn btn-danger btn-xs"
                                                                        @click="remove(row.id)">删除
                            </button>
                            </a>
                        </div>
                    </div>
                    <div id="incomeNum"></div>
                </div>
            </div>
            <div>
                <ul id="page"></ul>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="classType">
<input type="hidden" id="className">
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script src="/js/bootstrap-paginator.min.js" th:src="@{/js/bootstrap-paginator.min.js}"></script>

<script src="/js/content.js?v=1.0.0" th:src="@{/js/content.js?v=1.0.0}"></script>
<script src="/js/layui.js" th:src="@{/js/layui.js}"></script>
<script src="/js/plugins/clipboard/clipboard.min.js" th:src="@{/js/plugins/clipboard/clipboard.min.js}"></script>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script src="/js/vue.min.js" th:src="@{/js/vue.min.js}"></script>

<script type="text/javascript" th:inline="javascript">
    var ctxPath = /*[[@{/}]]*/ '';
</script>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            limit: 12,
            offset: 0,
            total: 0,
            file: '',
            type: '',
            rows: '',
            id: '',
            classList: '',
            storages : null
        },
        methods: {
            /**
             * 加载存储信息
             */
            getStorages: function () {
                $.getJSON(ctxPath+"common/ossStorage/listView", {
                }, function (r) {
                    console.log(r);
                    app.storages = r;
                    let html = "";
                    for (let i = 0; i < app.storages.length; i++) {
                        html += "<option value='"+app.storages[i].id+"'>"+app.storages[i].ossName+"</option>>";
                    }
                    $("#ossId").append(html);
                });
            },
            getData: function () {
                $.getJSON(ctxPath+"wallpaper/bzWallpaper/list2", {
                    limit: this.limit,
                    offset: this.offset,
                    classId: this.type
                }, function (r) {
                    app.total = r.total;
                    app.rows = r.rows;
                    app.page();
                });
            },
            getDataClass: function () {
                $.getJSON(ctxPath+"wallpaper/bzWallpaper/clazzList", {
                }, function (r) {
                    app.classList = r;
                });
            },
            page: function () {
                var options = {
                    currentPage: app.offset / 12 + 1, //当前页
                    totalPages: app.total / (12 + 1) + 1, //总页数
                    numberofPages: 4, //显示的页数
                    bootstrapMajorVersion: 3,
                    alignment: 'center',
                    size: 'large',
                    shouldShowPage: true,
                    itemTexts: function (type, page, current) { //修改显示文字
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "尾页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {
                        app.offset = (page - 1) * 12;
                        app.getData();
                    }
                };
                $('#page').bootstrapPaginator(options);
            },
            remove: function (id) {
                layer.confirm('确定要删除选中的记录？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.ajax({
                        url: ctxPath+"wallpaper/bzWallpaper/remove",
                        type: "post",
                        data: {
                            'id': id
                        },
                        success: function (r) {
                            if (r.code == 0) {
                                layer.msg(r.msg);
                                app.getData();
                            } else {
                                layer.msg(r.msg);
                                app.getData();
                            }
                        }
                    });
                })
            },
            changeType: function (event) {
                if("" == event){
                    this.type = '';
                    $("#classType").val('');
                    $("#className").val('');
                }else{
                    this.type = event.id;
                    $("#classType").val(event.id);
                    $("#className").val(event.name);
                }
                this.offset = 0;
                this.getData();
            }
        },
        created: function () {
            this.changeType('')
            this.getDataClass();
            this.getStorages();
        }
    });


    var clipboard = new Clipboard('button.copy', {
        text: function (trigger) {
            layer.msg('文件路径已复制到粘贴板');
            return $(trigger).attr('url');
        }
    });
    layui.use('upload', function () {

        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            url: ctxPath+'wallpaper/bzWallpaper/upload/oss2', //上传接口
            size: 51200,
            accept: 'file',
            exts: 'jpg|png|jpeg|bpm|gif',
            choose:function (obj) {

            },
            done: function (r) {
                layer.msg(r.msg);
                if(r.code == 0 || r.code == 200){
                    app.getData();
                }
            },
            before: function (){
                this.data = {
                    classType: $("#classType").val(),
                    className: $("#className").val(),
                    ossId: $("#ossId").val()
                }
                layer.msg('上传中', {icon: 16, time: 0});
            },
            error: function (r) {
                layer.msg(r.msg);
            }
        });

        upload.render({
            elem: '#test2',
            url: ctxPath+'wallpaper/bzWallpaper/upload/oss2' //上传接口
            ,exts: 'jpg|png|jpeg|bpm|gif'
            ,multiple: true
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                //console.log(obj.total); //得到总文件数
                //console.log(obj.successful); //请求成功的文件数
                //console.log(obj.aborted); //请求失败的文件数
                if(r.code == 0 || r.code == 200){
                    app.getData();
                }
            }
            ,done: function(res, index, upload){ //每个文件提交一次触发一次。详见“请求成功的回调”
                layer.msg(res.msg);
            },
            before: function (){
                this.data = {
                    classType: $("#classType").val(),
                    className: $("#className").val(),
                    ossId: $("#ossId").val()
                }
                layer.msg('上传中', {icon: 16, time: 0});
            },
            error: function (r) {
                layer.msg(r.msg);
            }
        });



    });
</script>

</body>
</html>
